<template>
  <a-modal title-align="start" title="创建商品" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="1200">
    <div class="top-step">
      <a-steps size="mini" small type="arrow" :current="curStepNum">
        <a-step>1、编辑商品数据</a-step>
        <a-step>2、编辑商品描述</a-step>
        <a-step>3、提交审核</a-step>
      </a-steps>
    </div>
    <div v-show="curStepNum == 1">
      <div class="mt10 basic-info">
        <a-row>
          <a-col :span="6">
            <a-space>
              <div style="width: 75px"> 可见范围：</div>
              <a-select style="width: 180px" v-model="titleForm.range" placeholder="请选择可见范围">
                <a-option label="商品页和搜素结果页" value="visible"></a-option>
                <a-option label="仅商品页" value="catalog"></a-option>
                <a-option label="仅搜素结果页" value="search"></a-option>
                <a-option label="隐藏" value="hidden"></a-option>
              </a-select>
            </a-space>
          </a-col>
          <a-col :span="6">
            <a-space>
              <div style="width: 75px"> 可见性：</div>
              <a-select style="width: 180px" v-model="titleForm.visiable" placeholder="请选择可见性">
                <a-option label="公开" value="publish"></a-option>
                <a-option label="私密" value="private"></a-option>
              </a-select>
            </a-space>
          </a-col>

          <a-col :span="6">
            <a-space>
              <div style="width: 55px"> 运营：</div>
              <a-select style="width: 180px" allow-search v-model="titleForm.operationUserId" placeholder="请选择运营">
                <a-option v-for="(item, index) of userList" :key="index" :label="item.userName" :value="item.id"></a-option>
              </a-select>
            </a-space>
          </a-col>

          <a-col :span="6">
            <a-space>
              <div style="width: 75px"> 是否推荐：</div>
              <a-radio-group v-model="titleForm.featured">
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </a-space>
          </a-col>
          <!-- <a-col :span="8" class="mt10">
            <a-space>
              <div style="width: 75px"> 商品品牌：</div>
              <a-select placeholder="请选择商品品牌">
                <a-option label="YFN" value="YFN"></a-option>
                <a-option label="YFN1" value="YFN1"></a-option>
                <a-option label="YFN2" value="YFN2"></a-option>
                <a-option label="YFN3" value="YFN3"></a-option>
              </a-select>
            </a-space>
          </a-col> -->
          <a-col :span="24" class="mt10">
            <a-space>
              <div style="width: 75px"> 刊登分类：</div>
              <div>
                <a-cascader style="min-width: 180px" allow-clear @change="selCateData" v-model="selCateId" :max-tag-count="1" :field-names="{ value: 'key', label: 'title' }" :options="categoryList" placeholder="请选择" multiple check-strictly />
              </div>
              <div class="category-con">
                <a-tag color="arcoblue" class="mr5 mb5 cursor" v-for="(item, index) of titleForm.categories" :key="index">
                  <a-space>
                    <div>{{ item.name }}</div>
                    <div class="cursor" @click="delCatTag(index)">
                      <icon-close />
                    </div>
                  </a-space>
                </a-tag>
                <div class="common-text">拖动排序，首位为主要分类</div>
              </div>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="variant-con mt10">
        <div class="top">类型：变体</div>
        <a-scrollbar class="mt5" style="height: 400px; overflow: auto">
          <div class="bottom-con">
            <!-- 商品主图 -->
            <div class="commodity-subject">
              <div class="title-bar">
                <span class="required">商品主体</span>
                <span class="common-text ml5" style="font-weight: 200">请选择ERP的产品SPU作为主体商品</span>
              </div>
              <div class="spu-info-con">
                <a-select v-if="!spuInfo.id" :style="{ width: '180px' }" @change="handleChangeSku" :loading="searchSpuLoading" placeholder="请输入SPU" @search="handleSearch" allow-clear allow-search :filter-option="false" :show-extra-options="false">
                  <a-option v-for="(item, index) of spuList" :key="index" :label="item.spu" :value="item.id"></a-option>
                </a-select>
                <div class="clearfix sku-detail-con" style="font-size: 12px" v-else>
                  <div class="fl">
                    <ImgPopover :src="imgUrl(spuInfo)">
                      <template #con>
                        <a-image :preview="false" width="60" height="60" fit="contain" :src="imgUrl(spuInfo)" />
                      </template>
                    </ImgPopover>
                  </div>
                  <div class="fl" style="width: calc(100% - 80px); margin: 10px 10px 0 10px">
                    <div>
                      <a-space>
                        <span class="common-text">SPU：</span>
                        <TextLimit position="top" :val="spuInfo.spu"></TextLimit>
                      </a-space>
                    </div>
                    <div style="margin-top: 5px">
                      <a-space>
                        <span class="common-text">名称：</span>
                        <TextLimit position="top" :val="spuInfo.spuName"></TextLimit>
                      </a-space>
                    </div>
                    <div style="margin-top: 5px">
                      <a-space>
                        <span class="common-text">类目：</span>
                        <span>{{ $extract(spuInfo, 'category.name') }}</span>
                        <span class="common-text ml10"> SKU数：</span>
                        <span>{{ spuInfo.productSkuList && spuInfo.productSkuList.length }}</span>
                      </a-space>
                    </div>
                  </div>

                  <div class="del-btn highlight cursor" @click="spuInfo = {}">
                    <icon-delete style="font-size: 20px" />
                  </div>
                </div>
              </div>
            </div>
            <!-- 产品图片 -->
            <div class="product-list mt10">
              <div class="title-bar">
                <span>商品图片</span>
                <span class="common-text ml5" style="font-weight: 200">拖动排序，首位为主图</span>
              </div>
              <div class="product-img-box">
                <div class="box">
                  <div class="product-sort-con">
                    <div class="box-img-con" v-for="(item, index) of picList" :key="index">
                      <div class="mask">
                        <div class="btn-con">
                          <!-- <icon-eye class="cursor" style="margin-right: 15px" @click.stop="showImgPre(index)" /> -->
                          <icon-delete class="cursor" @click.stop="picList.splice(index, 1)" />
                        </div>
                      </div>
                      <div class="draw-img-con" @click.stop="showImgPre(index)">
                        <a-image :preview="false" :src="item.url" width="80px" height="80px" />
                      </div>
                    </div>
                  </div>
                  <div class="fl" style="width: 80px; height: 80px">
                    <a-upload class="fl" :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="uploadBefore" />
                  </div>
                </div>
              </div>
            </div>
            <!-- 商品属性 -->
            <div class="product-property mt10">
              <div class="title-bar">商品属性</div>
              <shopProperty :shopId="props.shopId" @save="savePre" />
            </div>
            <!-- 商品变体 -->
            <div class="title-bar mt10">商品变体</div>
            <productVariant :picList="picList" ref="ProductVariant" :shopId="props.shopId" :spuInfo="spuInfo" :attList="selPropertyList" />
          </div>
        </a-scrollbar>
      </div>
    </div>
    <div v-show="curStepNum == 2">
      <a-scrollbar class="mt10" style="height: 480px; overflow: auto">
        <div>
          <div class="title-bar mt10">标题</div>
          <a-input v-model="editShopDescForm.name" @input="inputTitle" placeholder="请输入标题" max-length="60" show-word-limit />
          <a-space class="mt10">
            <span class="common-text">固定链接：</span>
            <div style="max-width: 1092px" class="flex-c">
              <div>https://www.jewelryodm.com/product/</div>
              <a-input style="width: 800px" v-model="editShopDescForm.link" placeholder="请输入" />
            </div>
          </a-space>

          <div class="title-bar mt10">商品要点</div>
          <editor v-model="editShopDescForm.shortDesc" :height="200" :excludeKeys="['group-image', 'group-video', 'insertTable', 'codeBlock', 'emotion']" />

          <div class="title-bar mt10">描述</div>
          <editor v-model="editShopDescForm.desc" :height="200" />

          <div class="goods-tag mt10">
            <div>商品标签</div>

            <!-- <div class="tag-con mt5">
              <a-tag @click="selTag(item)" class="cursor mr5" v-if="tagList[0]" v-for="(item, index) of tagList" :key="index" color="arcoblue" bordered>{{ $extract(item, 'dataFromRestApi.name') }}</a-tag>
              <a-empty v-else description="暂无标签" />
            </div>
            <div class="mt10">已添加的标签</div> -->
            <div class="flex-c">
              <!-- <a-input style="width: 800px" v-model="tagName" placeholder="批量添加请使用英文半角逗号隔开" /> -->
              <a-select :style="{ width: '800px' }" @change="handleSelectTag" v-model="tagName" allow-search :loading="loading" placeholder="请输入选择" @search="handleSearchTag" :filter-option="false">
                <a-option v-for="item of tagList" :value="item.id">{{ item.dataFromRestApi.name }}</a-option>
              </a-select>
              <a-button class="gray-outline ml5" @click="quickAddTag">添加</a-button>
            </div>
            <div class="tag-con mt5">
              <a-tag v-if="selTagList[0]" class="mr5" v-for="(item, index) of selTagList" :key="index" color="arcoblue" bordered>
                <a-space>
                  <div>{{ item.name }}</div>
                  <div class="cursor" @click="deleteSelTag(index)">
                    <icon-close />
                  </div>
                </a-space>
              </a-tag>
              <a-empty v-else description="暂无标签" />
            </div>
          </div>
        </div>
      </a-scrollbar>
    </div>
    <div v-show="curStepNum == 3">
      <div class="flex-c-c" style="text-align: center; font-size: 20px; margin: 50px" v-if="addType == '1'">
        <icon-check-circle class="highlight" style="font-size: 40px" />
        <span>刊登商品创建成功，进入待审核状态！</span>
      </div>
      <div class="flex-c-c" style="text-align: center; font-size: 20px; margin: 50px" v-if="addType == '2'">
        <icon-check-circle class="highlight" style="font-size: 40px" />
        <span>刊登商品创建成功，进入草稿状态！</span>
      </div>
    </div>
    <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="picList.map((e:any) => e.url)" />

    <template #footer class="modal-footer">
      <a-button v-if="curStepNum == 1" class="gray-outline" @click="showvisible = false">取消</a-button>
      <a-button v-if="curStepNum == 1" class="gray-outline" @click="curStepNum++">下一步</a-button>
      <a-button v-if="curStepNum == 2" class="gray-outline" @click="curStepNum--">上一步</a-button>
      <a-button v-if="curStepNum == 2" :loading="submitCheckLoading" type="primary" @click="submit('check')">提交审核</a-button>
      <a-button v-if="curStepNum == 2" :loading="draftLoading" type="primary" @click="submit('draft')">保存草稿</a-button>
      <a-button v-if="curStepNum == 3" type="primary" @click="know">知道了</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { nextTick, ref, computed, onMounted } from 'vue'
  import { getProductSPUList, listAllCategoryTreeByShopId, tagRollPage, batchTag, versionBatchCreate, versionBatchSubmitAudit } from '@/api/product'
  import { OSSUpload } from '@/utils/ossUpload'
  import { getOrganizesUser } from '@/api/system'
  import { findChildrenArray } from '@/utils'
  import { Message, Modal } from '@arco-design/web-vue'
  import productVariant from './productVariant.vue'
  import editor from '@/components/wangeditor/editor.vue'
  import shopProperty from './shopProperty.vue'
  import Sortable from 'sortablejs'
  import dayjs from 'dayjs'
  import _ from 'lodash-es'
  let props = defineProps(['modelValue', 'shopId', 'shopList'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let ProductVariant = ref()
  let curStepNum = ref(1)
  let current = ref(1)
  let addType = ref('1')
  let visible = ref(false)
  let loading = ref(false)
  let draftLoading = ref(false)
  let submitCheckLoading = ref(false)
  let userList: any = ref([])
  // 商品头部数据
  let titleForm: any = ref({
    visiable: '',
    range: '',
    featured: false,
    categories: [],
    operationUserId: '',
  })

  // 编辑商品描述
  let editShopDescForm = ref({
    name: '',
    link: '',
    desc: '', //商品描述
    shortDesc: '', //商品简短描述
    goodsType: 'variable', // 商品类型
  })
  let categoryList = ref([]) // 分类列表
  let selCateId = ref([]) // 选中的分类数据
  let picList: any = ref([]) // 商品图片
  let spuList: any = ref([])
  let spuInfo: any = ref({}) // spu信息
  let searchSpuLoading = ref(false)
  let uplaodfixPicLoading = ref(false)
  let selPropertyList: any = ref([])
  let tagName = ref('') // 标签名字
  let tagList: any = ref([]) // 已存在的标签列表
  let selTagList: any = ref([]) // 已经选中的标签

  const handleSearch = async (value: string) => {
    if (value) {
      try {
        searchSpuLoading.value = true
        const res: any = await getProductSPUList({ keyword: value, keywordType: 'spu', searchType: 'exact' })
        spuList.value = res.data?.records || []
      } catch (error) {}
      searchSpuLoading.value = false
    } else {
      spuList.value = []
    }
  }

  const handleChangeSku = (val: string) => {
    let item = spuList.value.find((item: any) => item.id == val)
    if (item) {
      spuInfo.value = item
    } else {
      spuInfo.value = {}
    }

    // 将spu的图片填入到下面
    console.log(item)

    let imgArr = item.productPicList || []
    picList.value = [...picList.value, ...imgArr]
  }

  const imgUrl = (info: any) => {
    return info.productPicList[0]?.url || ''
  }

  // 上传图片
  const uploadBefore: any = async (file: File) => {
    uplaodfixPicLoading.value = true
    const res: any = await OSSUpload(file)
    uplaodfixPicLoading.value = false
    if (res) {
      let obj = {
        url: res.url,
        name: res.name.split('/')[res.name.split('/').length - 1],
      }
      picList.value.push(obj)
    }
  }

  // 预览图片
  const showImgPre = (index: number) => {
    current.value = index
    visible.value = true
  }

  // 初始化拖拽
  const rowDrop = () => {
    const body: any = document.querySelector('.category-con')
    if (!body) return
    Sortable.create(body, {
      animation: 200, // 定义排序动画的时间
      forceFallback: true,
      sort: true,
      onEnd(evt: any) {
        titleForm.value.categories.splice(evt.newIndex, 0, titleForm.value.categories.splice(evt.oldIndex, 1)[0])
        var newArray = titleForm.value.categories.slice(0)
        titleForm.value.categories = []
        nextTick(() => {
          titleForm.value.categories = newArray
        })
      },
    })
  }
  // 初始化拖拽
  const rowDropProductImg = () => {
    const body: any = document.querySelector('.product-sort-con')
    if (!body) return
    Sortable.create(body, {
      animation: 200, // 定义排序动画的时间
      forceFallback: true,
      sort: true,
      handle: '.draw-img-con',
      onEnd(evt: any) {
        picList.value.splice(evt.newIndex, 0, picList.value.splice(evt.oldIndex, 1)[0])
        var newArray = picList.value.slice(0)
        picList.value = []
        nextTick(() => {
          picList.value = newArray
        })
      },
    })
  }

  // 获取类目
  const getCategory = async () => {
    const res: any = await listAllCategoryTreeByShopId({ shopId: props.shopId })
    categoryList.value = res.data || []
    setNewTreeData(categoryList.value)
  }

  const setNewTreeData = (data: any) => {
    data.forEach((item: any) => {
      item.title = item.dataFromRestApi.name
      item.key = item.dataFromRestApi.id
      if (!item.children[0]) item.children = null
      if (item.children) {
        setNewTreeData(item.children)
      }
    })
  }
  // 选中分类
  const selCateData = (val: Array<any>) => {
    let arr: any = []
    val.forEach((e: any) => {
      let item = findChildrenArray(categoryList.value, e, 'key')
      let obj = {
        name: item.dataFromRestApi.name,
        slug: item.dataFromRestApi.slug,
        id: item.dataFromRestApi.id,
      }
      arr.push(obj)
    })
    titleForm.value.categories = arr
  }

  // 删除分类
  const delCatTag = (i: number) => {
    console.log(i)

    let cateId = titleForm.value.categories[i].id
    let index = selCateId.value.findIndex((e: any) => e.id == cateId)
    selCateId.value.splice(index, 1)
    titleForm.value.categories.splice(i, 1)
  }

  // 标签信息
  const getTag = async () => {
    let params = {
      shopIdList: [props.shopId],
      pageSize: 9999999,
    }
    const res: any = await tagRollPage(params)
    tagList.value = res.data.list || []
  }

  // 选择标签
  const selTag = (item: any) => {
    let index = selTagList.value.findIndex((e: any) => e.name == item.dataFromRestApi.name)
    if (index == -1) {
      let obj = {
        id: item.dataFromRestApi.id,
        name: item.dataFromRestApi.name,
        slug: item.dataFromRestApi.slug,
      }
      selTagList.value.push(obj)
    }
  }

  // 快速添加标签
  const quickAddTag = async () => {
    if (!tagName.value) return Message.error('请填写标签名称')
    if (tagList.value.length <= 0) {
      // let arr = tagName.value.trim().split(',')
      let arr = [tagName.value.trim()]
      let params: any = {
        param: {
          create: [],
        },
        shopId: productInfo.value.shopId,
      }
      arr.forEach((e) => {
        let obj = {
          name: e,
          description: '',
          slug: e,
        }
        params.param.create.push(obj)
      })

      const res: any = await batchTag(params)
      if (res) {
        tagName.value = ''
        getTag()
        selTagList.value = [...selTagList.value, ...params.param.create]
        Message.success('添加标签成功')
      }
    } else {
      let item = tagList.value.find((e: any) => e.id == tagName.value)
      selTag(item)
    }
  }

  const savePre = (list: any) => {
    selPropertyList.value = list
  }

  const inputTitle = (val: string) => {
    let text = val.toLocaleLowerCase().replace(/\s{1,}/g, '-')
    editShopDescForm.value.link = text.replace(/[^\w\s\u4e00-\u9fa5]/g, ' ')
  }

  const getParams = () => {
    let curShopInfo = props.shopList.find((item: any) => item.id == props.shopId) // 当前选中的店铺信息
    let variantList = ProductVariant.value // 变体数据以及阶梯价格信息
    let params: any = {
      createOrUpdateDocList: [
        {
          dataFromRestApi: {
            catalog_visibility: titleForm.value.range,
            status: titleForm.value.visiable,
            featured: titleForm.value.featured,
            categories: titleForm.value.categories,

            sku: spuInfo.value.spu || '',
            images: picList.value.map((e: any) => {
              e.src = e.url
              return e
            }),
            attributes: selPropertyList.value,
            meta_data: [],
            name: editShopDescForm.value.name,
            permalink: `https://www.jewelryodm.com/product/${editShopDescForm.value.link}`,
            description: editShopDescForm.value.desc,
            short_description: editShopDescForm.value.shortDesc,
            tags: selTagList.value,
            type: 'variable',
          },
          variationList: variantList.autoCreateTableList,
          shopId: props.shopId,
          shopName: curShopInfo.shopName,
          mallSourceUrl: spuInfo.value?.mallSourceUrl || '',
          operationUserId: titleForm.value.operationUserId,
          operationUserName: '',
        },
      ],
    }

    // 运营名字
    if (titleForm.value.operationUserId) {
      let item = userList.value.find((e: any) => e.id == titleForm.value.operationUserId)
      if (item) params.createOrUpdateDocList[0].operationUserName = item.userName
    }
    //    --一口价 ------
    if (variantList.salePriceForm.priceType == 'disable') {
      let obj = { key: 'wpcpq_enable', value: 'disable' }
      let obj1 = { key: 'min_quantity', value: variantList.salePriceForm.num }
      params.createOrUpdateDocList[0].dataFromRestApi.meta_data = [obj, obj1]

      params.createOrUpdateDocList[0].variationList.forEach((e: any) => {
        // 设置时间
        if (variantList.salePriceForm.salePlanTime[0]) {
          let start = variantList.salePriceForm.salePlanTime[0]
          let end = variantList.salePriceForm.salePlanTime[1]
          e.date_on_sale_from = dayjs(start).format('YYYY-MM-DDTHH:MM:ss')
          e.date_on_sale_from_gmt = dayjs(start).format('YYYY-MM-DDTHH:MM:ss')
          e.date_on_sale_to = dayjs(end).format('YYYY-MM-DDTHH:MM:ss')
          e.date_on_sale_to_gmt = dayjs(end).format('YYYY-MM-DDTHH:MM:ss')
        }
      })
    } else {
      // 阶梯价  父体上
      let arr: any = []
      variantList.salePriceForm.priceList.forEach((el: any) => {
        let obj = { quantity: el.startNum, price: el.price, text: '', endNum: el.endNum }
        arr.push(obj)
      })

      let itemInfo = {
        apply: 'all',
        apply_val: '',
        layout: 'default',
        method: 'volume',
        role: 'all',
        tiers: arr,
      }
      let obj = { key: 'wpcpq_enable', value: 'override' }
      let obj1 = { key: 'wpcpq_prices', value: JSON.stringify(itemInfo) }
      params.createOrUpdateDocList[0].dataFromRestApi.meta_data = [obj, obj1]
    }

    //  阶梯价的时候也给后台传入一个起订量数据
    let arr = ProductVariant.value.salePriceForm.priceList || []
    console.log(arr)

    let firstItem = arr[0] || {}
    let meta_data_obj = { key: 'min_quantity', value: firstItem.startNum || '1' }
    params.createOrUpdateDocList[0].dataFromRestApi.meta_data.push(meta_data_obj)
    // 将子体数据包一层
    params.createOrUpdateDocList[0].variationList.forEach((e: any) => {
      let obj = _.cloneDeep(e)
      e.dataFromRestApi = obj
      e.dataFromRestApi.meta_data instanceof Array ? e.dataFromRestApi.meta_data.push(meta_data_obj) : (e.dataFromRestApi.meta_data = [meta_data_obj])
      return e
    })

    return params
  }

  const submit = async (type: string) => {
    if (!spuInfo.value.id) return Message.error('请选择商品主体信息')
    try {
      type == 'draft' ? (draftLoading.value = true) : (submitCheckLoading.value = true)

      const res = await versionBatchCreate(getParams())
      if (res) {
        if (type == 'draft') {
          addType.value = '2'
          curStepNum.value++
        } else {
          check(res.data[0])
        }
      }
    } catch (error) {}
    draftLoading.value = false
    submitCheckLoading.value = true
  }

  const check = async (data: any) => {
    const res: any = await versionBatchSubmitAudit({ idList: [data.id] })
    if (res) {
      addType.value = '1'
      curStepNum.value++
    }
  }

  const know = () => {
    showvisible.value = false
    emits('save')
  }

  const getUSerList = async () => {
    let params = {
      depart: false,
      pageNum: 1,
      pageSize: 100000,
    }
    const res: any = await getOrganizesUser(params)
    userList.value = res?.data?.records || []
  }

  const handleSelectTag = (id: string) => {
    let item = tagList.value.find((e: any) => e.id == id)
    selTag(item)
  }

  const handleSearchTag = async (value: string) => {
    if (value) {
      try {
        loading.value = true
        let params = {
          shopIdList: [props.shopId],
          pageSize: 9999999,
          keyword: value,
          keywordType: 'dataFromRestApi.name',
          searchType: 'exact',
        }
        const res: any = await tagRollPage(params)
        tagList.value = res.data.list || []
        if (tagList.value.length <= 0) tagName.value = value
      } catch (error) {}
      loading.value = false
    } else {
      spuList.value = []
    }
  }

  const deleteSelTag = (i: number) => {
    // tagName.value = ''
    // tagList.value = []
    selTagList.value.splice(i, 1)
  }

  onMounted(() => {
    nextTick(() => {
      getUSerList()
      rowDrop()
      rowDropProductImg()
      getCategory()
      getTag()
    })
  })
</script>

<style lang="less" scoped>
  .basic-info {
    border: 1px solid #d7d7d7;
    padding: 10px;
  }

  .category-con {
    // width: 550px;
    // border: 1px solid red;
  }

  .variant-con {
    height: 100%;
    border: 1px solid #d7d7d7;
    .top {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      font-weight: 700;
      background-color: #f2f2f2;
    }

    .bottom-con {
      // height: 460px;
      padding: 5px 10px;
      .commodity-subject {
        .spu-info-con {
          min-height: 80px;
          width: 100%;
          border: 1px solid #d7d7d7;
          padding: 5px;
          box-sizing: border-box;
          border-radius: 5px;

          .sku-detail-con {
            position: relative;
            .del-btn {
              position: absolute;
              right: 10px;
              top: 10px;
            }
          }
        }
      }
      .product-list {
        .product-img-box {
          overflow: hidden;
          .box {
            margin-top: 5px;
            // min-height: 180px;
            // border-right: 1px solid #d7d7d7;
            .box-img-con {
              float: left;
              width: 80px;
              height: 80px;
              position: relative;
              margin: 0 10px 10px 0;
              &:hover {
                .mask {
                  display: block;
                }
              }
              .mask {
                height: 30px;
                width: 80px;
                position: absolute;
                bottom: 0;
                left: 0;
                display: none;
                z-index: 1;
                background: rgba(0, 0, 0, 0.5);
                .btn-con {
                  width: 80px;
                  color: white;
                  font-size: 18px;
                  text-align: center;
                  // margin-top: 25px;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
